<template>
  <div class="index">
    <div @click="close()" v-if="coupon.length" class="index_bg">
      <div class="toastTip">
        <img :src="imgList.indexcoupon" alt>
        <span>{{coupon}}</span>
      </div>
    </div>
    <header>
      <img :src="imgList.index_01" alt>
    </header>
    <section>
      <img :src="imgList.index_02" alt>
    </section>
    <section>
      <img :src="imgList.indexnew_02" alt>
      <div class="left_50" data-title="蛋无虚发" @click="jump(0, $event)"></div>
      <div class="right_50" @click="getCoupon()"></div>
    </section>
    <div style="position: relative;"  @click="jump(1, $event)" v-if="listDataDeal.length">
      <img data-title='限时秒杀' :src="imgList.indexnew_03" alt>
      <div class="right_50 sliderImg" style="height:2.35rem">
        <slider ref="slider" :options="options" @slide="slide">
          <!-- 直接使用slideritem slot -->
          <slideritem v-for="(item,index) in listDataDeal" :price="item.group_price" :key="index">
            <img style="height:2.22rem" :src="item.img320_url" alt srcset>
          </slideritem>
          <!-- 设置loading,可自定义 -->
        </slider>
      </div>
      <div class="ms_name right_50">
        <span>{{name}}</span>
      </div>
      <div class="ms_price right_50" v-if="price">
        <i style="float:left">￥</i>
        <span>{{price}}</span>
      </div>
    </div>
    <section>
      <img :src="imgList.index_05" alt>
    </section>
    <section>
      <img :src="imgList.index_06" alt>
      <div class="left_50" data-title="赶大集" @click="jump(2, $event)"></div>
      <div class="right_50" data-title="尝年味" @click="jump(3, $event)"></div>
    </section>
    <section>
      <img :src="imgList.index_07" alt>
      <div class="left_33_1" data-title="送好礼" @click="jump(4, $event)"></div>
      <div class="left_33_2" data-title="闹新年" @click="jump(5, $event)"></div>
      <div class="left_33_3" data-title="暖人心" @click="jump(6, $event)"></div>
    </section>
    <section>
      <img :src="imgList.index_08" alt>
    </section>
    <div class="lists">
      <div v-for="(item,index) in goods" :key="index" @click="goDetail(item.goodsId)">
        <img :src="imgList.hot" class="hot" alt>
        <x-img :src="item.imgUrl" :default-src="imgList.defaultSrc"/>
        <p class="name">{{item.title}}</p>
        <p class="price">
          <span>
            ￥
            <i>{{item.price}}</i>
          </span>
          <span class="del">￥{{item.tjj_price}}</span>
        </p>
        <span class="lj">立即抢购</span>
      </div>
    </div>
  </div>
</template>



<script>
import Vue from "vue";
import VConsole from "VConsole";
import Lib from "assets/js/Lib";
import { log } from "util";
import { slider, slideritem } from "vue-concise-slider";

export default {
  data() {
    return {
      price: 0,
      name: "商品",
      options: {
        currentPage: 0,
        thresholdDistance: 500,
        thresholdTime: 100,
        autoplay: 1500,
        loop: true,
        direction: "vertical",
        infinite: 1,
        slidesToScroll: 1,
        timingFunction: "ease",
        duration: 300
      },
      listData: [],
      listDataDeal: [],
      goods: [],
      coupon: "",
      imgList: [],
      user_id: "",
      token: "",
      uuid: "",
      currentVersion:''
    };
  },
  created() {
    //http://m.taojiji.org/index.php/DoubleTwelve/topGoodsList

    var this_ = this;
    this_.addImgUrl();
    this_.assignNum();

    var goods_ids =
      window.location.host == "a.taojiji.com"
        ? "1736614,1618062,1660920,1727821,1658230,1738115,1609766,1599285,1608028,1639560,1753357,1748519,1754041,1603827,1589785,1760194,1656665,1706314,1756361,1758970,1650836,1652004,1638611,1650794,1654636,1744018,1736870,1719863,1741619,1728621,1639903,1599752,1721359,1743082,1748585,1592215,1619185,1620351,1743866,1747098"
        : "247348,442212,512274,1214717,1214719,1214721,1214825,1214827,1214829,1214885,1214907,1214908,1214909,1214911,1214912,1214916,1214917,1214919";

    //秒杀的接口
    this.$http
      .post(`${this.$apis.apis.twelveGoodsListSpikephp}`)
      .then(function(response) {
        this_.listData = response.data.data.goodsInfo.length
          ? response.data.data.goodsInfo
          : [];

        this_.listDataDeal = this_.listData.length
          ? this_.listData.slice(0, 9)
          : [];
        console.log(this_.listDataDeal);

        this_.price = this_.listData.length ? this_.listData[0].group_price : 0;
        this_.name = this_.listData.length ? this_.listData[0].goods_name : "";
      })
      .catch(function(error) {
        console.log(error);
      });
    // top榜单
    let params = {
      user_id: this.user_id,
      token: this.token,
      uuid: this.uuid,
      goods_ids: goods_ids,
      all: "0"
    };
    this.$http
      .post(`${this.$apis.apis.newYearGoods}`, this.$qs.stringify(params))
      .then(function(response) {
        this_.goods = response.data.data;
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  components: {
    slider,
    slideritem
  },
  mounted() {
    var params = {
        fun_name: "进入活动页面",
        fun_type: "HD1",
        client_version: this.currentVersion,
        user_id: this.user_id,
        uuid: this.uuid,
        param1: document.title,
      };
      // this.sendPoint(params);
  },
  methods: {
    assignNum() {
      if (window.location.hostname == "localhost") {
        window.tjj_token = "fe56b97524e55c9_";
        window.tjj_uuid = "928b4d96-687d-4b4b-85b2-bd4b02d4f553";
        window.tjj_user_id = "20643928697404606";
      }
      this.token = window.tjj_token;
      this.uuid = window.tjj_uuid;
      this.user_id = window.tjj_user_id;
      this.currentVersion = window.currentVersion || -1;
    },

    // 跳转商品详情
    goDetail(value) {
      jump2good(value);
    },

    // 图片处理
    addImgUrl() {
      var baseUrl =
        window.location.host == "a.taojiji.com"
          ? "https://tjjstatic.taojiji.com/wapsite/default/static/"
          : "http://tjjstatic.shan666.com/wapsite/default/static/";
      this.imgList = {
        index_01: baseUrl + "img/index_01.jpg",
        index_02: baseUrl + "img/index_02.jpg",
        index_03: baseUrl + "img/index_03.jpg",
        index_05: baseUrl + "img/index_05.jpg",
        index_06: baseUrl + "img/index_06.jpg",
        index_07: baseUrl + "img/index_07.jpg",
        index_08: baseUrl + "img/index_08.jpg",
        indexcoupon: baseUrl + "img/indexcoupon.png",
        hot: baseUrl + "img/hot.png",
        indexnew_01: baseUrl + "img/indexnew_01.jpg",
        indexnew_02: baseUrl + "img/indexnew_02.jpg",
        indexnew_03: baseUrl + "img/indexnew_03.jpg",
        defaultSrc: baseUrl + "img/loading.png"
      };
    },

    // jump: function(index) {
    //   console.log(index);
    //   var origin = window.location.origin;
    //   console.log(origin);
    //   var url = origin;
    // },
    jump(t, value) {
      var page = "NewActivity/eggGame";
      var e = window.location.origin;

      var params = {
        fun_name: "进入活动页面",
        fun_type: "HD1",
        client_version: this.currentVersion,
        user_id: this.user_id,
        uuid: this.uuid,
        param1: document.title,
        param12: value.target.dataset.title
      };
      // this.sendPoint(params);

      var tjj_user =
        "/user_id/" +
        this.user_id +
        "/token/" +
        this.token +
        "/uuid/" +
        this.uuid;
      switch (t) {
        case 0:
          page = "/NewActivity/eggGame" + tjj_user;
          break;
        case 1:
          page = "/MzzAct/xsmsAct/xsmsAct";
          break;
        case 2:
          page = "/Fashion/newDress" + tjj_user;
          break;
        case 3:
          page = "/Fashion/food" + tjj_user;
          break;
        case 4:
          page = "/TaoAction/newYearGift" + tjj_user; //haoli
          break;
        case 5:
          page = "/NewActivity/wanwu" + tjj_user; //xincun
          break;
        case 6:
          page = "/Fashion/nrx" + tjj_user; //暖人心
          break;
      }
      // console.log(e + page);
      window.location.href = e + "/index.php" + page;
      // console.log(value.target);
      

      
    },

    getCoupon: function() {
      var this_ = this;

      var params1 = {
        fun_name: "位置点击",
        fun_type: "HD1ckick",
        client_version: this.currentVersion,
        user_id: this.user_id,
        uuid: this.uuid,
        param1: document.title,
        param2: '001'
      };
      this.sendPoint(params1);


      let params = {
        user_id: this.user_id,
        token: this.token,
        uuid: this.uuid,
        type: "2"
      };

      this.$http
        .post(`${this.$apis.apis.newYearCoupon}`, this.$qs.stringify(params))
        .then(function(response) {
          if (response.data.userType == 1) {
            this_.coupon = response.data.data.aj_name;
          } else {
            this_.$vux.toast.show({
              type: "text",
              text: response.data.message
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    close: function() {
      this.coupon = "";
    },
    // Listener event
    slide(data) {
      var this_ = this;
      var s = document.getElementsByClassName("slider-pagination-bullet");
      for (var i = 0; i < s.length; i++) {
        if (
          s[i].getAttribute("class") ==
          "slider-pagination-bullet slider-pagination-bullet-active"
        ) {
          this_.price = this_.listData[i + 1].group_price;
          this_.name = this_.listData[i + 1].goods_name;
        }
      }

      // var a= document.getElementsByClassName("slider-pagination-bullet-active");
    },

    sendPoint (params) {
		// var params = {
		// 	fun_name: '进入活动页面',
		// 	fun_type: 'HD1',
		// 	user_id: "{$_GET['user_id']}",
		// 	uuid: "{$_GET['uuid']}",
		// 	param1: document.title
    //   }
    var tempParam1 = '';
		if (params.param1) {
			tempParam1 = '首页$_$' +  params.param1 + (params.param12 ?  "$_$" + params.param12 : '');
		} else {
			console.error('params.param1 title获取不到')
			return;
		}
    
		var event_id = new Date().getTime() + +params.user_id;
    var tempJson = {
			"app_market": -1,
			"client_latitude": -1,
			"client_longitude": -1,
			"client_version": params.client_version || -1,
			"cpu_id": -1,
			"device_board": -1,
			"device_display": -1,
			"device_hardware": -1,
			"device_iccid": -1,
			"device_id": -1,
			"device_imei": -1,
			"device_imsi": -1,
			"device_meid": -1,
			"device_model": -1,
			"device_name": -1,
			"device_resolution": -1,
			"device_serial": -1,
			"login_mode": -1,
			"network_type": -1,
			"os_version": -1,
			"platform": 3,
			"product_line": "1",
			"uuid": params.uuid || -1,
			"wifi_mac": -1,
			"event_record": [{
				"event_id": event_id,
				"fun_name": params.fun_name || -1,
				"fun_type": params.fun_type || -1,
				"log_time": new Date().format("yyyy-MM-dd hh:mm:ss"),
				"gender": -1,
				"is_new_user": -1,
				"is_pay_user": -1,
				"param1": tempParam1 || -1,
				"param2": params.param2 || -1,
				"param3": params.param3 || -1,
				"param4": params.param4 || -1,
				"param5": params.param5 || -1,
				"param6": params.param6 || -1,
				"param7": params.param7 || -1,
				"param8": params.param8 || -1,
				"param9": params.param9 || -1,
				"param10": params.param10 || -1,
				"pos_id": -1,
				"user_id": params.user_id || -1
			}]
		};

		var requestUrl = window.location.host == 'a.taojiji.com' ? 'https://c.taojiji.com/v1.0.0/h/warehouse/appevent/client/batch/receive' : 'https://testc.taojiji.com/v1.0.0/h/warehouse/appevent/client/batch/receive';

    this.$http.post(`${requestUrl}`, tempJson, {
        headers: {
            "Content-Type": "application/json;charset=UTF-8"
        }
    }).then(res => {
      console.log(res);
      
    })
		// $.ajax({
		// 	url: requestUrl,
		// 	type: 'post',
		// 	contentType: "application/json; charset=utf-8",
		// 	dataType: "json",
		// 	data: JSON.stringify(tempJson),
		// 	success: function (res) {
		// 		console.log(res);
		// 	},
		// })
	}
  }
};
</script>

<style lang="less" scoped>
.index_bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  top: 0;
  z-index: 55;
  position: fixed;
  height: 100%;
  width: 100%;
}
.index_bg img {
  width: 5.05rem;
  height: 7.16rem;
  margin: 2rem auto;
}
.index_bg span {
  text-align: center;
  position: absolute;
  top: 4.9rem;
  width: 30%;
  left: 35%;
  color: #d0161b;
  font-weight: bolder;
  font-size: 0.32rem;
}
.seamless-warp {
  height: 229px;
  overflow: hidden;
}
img {
  width: 100%;
  display: block;
}
section {
  position: relative;
  z-index: 1;
}
.right_50 {
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  width: 50%;
}
.left_50 {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  top: 0;
}
.sliderImg {
  width: 2.3rem;
  height: 2.4rem;
  margin: 0 auto;
  right: 0.76rem;
  top: 0.17rem;
}
.sliderImg img {
  width: 100%;
}
.ms_price {
  bottom: 0.2rem;
  top: auto;
  height: auto;
  color: #fff;
  right: 0.3rem;
  text-align: right;
  width: 0.9rem;
  line-height: 0.24rem;
}
.ms_name {
  bottom: 0.95rem;
  top: auto;
  height: auto;
  color: #fff;
  right: 0.8rem;
  text-align: right;
  width: 2.5rem;
  overflow: hidden;
  padding-bottom: 0rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms_price span {
  float: right;
}
.left_33_1 {
  width: 31%;
  left: 3%;
  position: absolute;
  top: 0;
  height: 100%;
}
.left_33_2 {
  width: 33%;
  left: 34%;
  position: absolute;
  top: 0;
  height: 100%;
}
.left_33_3 {
  width: 33%;
  left: 66%;
  position: absolute;
  top: 0;
  height: 100%;
}
.lists {
  width: 100%;
  padding: 0 0.18rem;
  background: #d0161b;
  min-height: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.lists > div {
  width: 3.52rem;
  height: 4.67rem;
  background: #fff;
  margin-bottom: 0.28rem;
  border-radius: 0 0 0.1rem 0.1rem;
  position: relative;
}
.lists > div .name {
  font-family: SourceHanSansCN-Bold;
  font-size: 0.3rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: -1px;
  color: #000000;
  margin-top: 0.1rem;
  padding: 0 0.16rem;
  overflow: hidden;
  padding-bottom: 0rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lists img {
  width: 3.52rem;
  height: 3.52rem;
}
.lists .hot {
  width: 0.59rem;
  height: 0.98rem;
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
  z-index: 22;
}
.lists .lj {
  position: absolute;
  bottom: -0.01rem;
  right: -0.01rem;
  height: 0.62rem;
  width: 1.83rem;
  display: block;
  background: url(../../../assets/images/index/goodsicon.png);
  z-index: 66;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #fff;
  padding-left: 15%;
  box-sizing: border-box;
  line-height: 0.62rem;
}
.price {
  color: #f32625;
  font-size: 0.26rem;
  padding-left: 0.16rem;
  margin-top: 0.1rem;
}
i {
  font-size: 0.3rem;
  font-style: normal;
}
.del {
  text-decoration: line-through;
  color: #aaa;
  font-size: 0.22rem;
}
.toastTip {
  position: relative;
}
</style>
